<template>
  <div class="app-main-container">
    <QueryForm
      v-model="querys"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearQueryForm"
    >
      <template #btns>
        <el-button
          v-if="meta.indexOf('MealsUseDetailExport') > -1"
          type="primary"
          @click="comboRecordExport"
        >{{ translate("export") }}</el-button>
      </template>
      <template #indate>
        <el-date-picker
          v-model="querys.indate"
          type="datetimerange"
          :range-separator="translate('to')"
          :start-placeholder="translate('ksrq')"
          :end-placeholder="translate('jsrq')"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="w400"
          :picker-options="pickerOptions"
        />
      </template>
    </QueryForm>
    <div class="doumee_table_header">
      <el-button
        v-preventReClick
        type="primary"
        @click="openModal('jiedong')"
      >{{ translate("thaw") }}</el-button>
      <el-button v-preventReClick @click="openModal('tiaozheng')">{{
        translate("cmoboDdjust")
      }}</el-button>
      <el-button v-preventReClick type="danger" @click="openModal('zuofei')">{{
        translate("cancellation")
      }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="saleRecordLoading"
      :data="saleRecordList"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        fixed="left"
        align="center"
        type="selection"
        :selectable="handleDisable"
        width="55"
      />
      <el-table-column
        align="center"
        :label="translate('comboNum')"
        width="300"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="comboDetail(scope.row)">{{
            scope.row.id
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('cmoboType')"
        width="120"
      >
        <template v-slot="scope">
          <span v-if="scope.row.mealsType === '0'">{{
            translate("mpcsk")
          }}</span>
          <span v-if="scope.row.mealsType === '1'">{{
            translate("mpqxk")
          }}</span>
          <span v-if="scope.row.mealsType === '2'">{{
            translate("ydck")
          }}</span>
          <span v-if="scope.row.mealsType === '3'">{{
            translate("courseSubCard")
          }}</span>
          <span v-if="scope.row.mealsType === '4'">{{
            translate("courseLimitCard")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('tcname')"
        show-overflow-tooltip
        width="160"
        prop="mealsName"
      />
      <el-table-column
        align="center"
        :label="translate('memberInfo')"
        min-width="240"
        prop="memberInfo"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('totalDegree')"
        width="80"
        prop="numCount"
      >
        <template v-slot="scope">
          <span v-if="scope.row.mealsType === '1'">-</span>
          <span v-else>{{ scope.row.numCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('useNum')"
        width="80"
        prop="useCount"
      >
        <template v-slot="scope">
          <span v-if="scope.row.mealsType === '1'">-</span>
          <span v-else>{{ scope.row.useCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('residueNum')"
        width="80"
        prop="remainCount"
      >
        <template v-slot="scope">
          <span v-if="scope.row.mealsType === '1'">-</span>
          <span v-else>{{ scope.row.remainCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('validDate')"
        width="120"
        prop="validTime"
      />
      <el-table-column
        align="center"
        :label="translate('autoThrwTime')"
        width="120"
        prop="autoFreezeDate"
      />
      <el-table-column
        fixed="right"
        align="center"
        :label="translate('comboStatus')"
        width="80"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status === '0'" class="text_success">{{
            translate("normal")
          }}</span>
          <span v-if="scope.row.status === '1'" class="text_warning">{{
            translate("freeze")
          }}</span>
          <span v-if="scope.row.status === '2'" class="text-danger">{{
            translate("cancellation")
          }}</span>
          <span v-if="scope.row.status === '3'" class="text-danger">{{
            translate("loseEfficacy")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('handle')"
        fixed="right"
        width="150"
      >
        <template v-slot="scope">
          <template>
            <el-button
              v-if="
                meta.indexOf('MealsMemberPartRefund') > -1 &&
                  (scope.row.status == '0' || scope.row.status == '1')
              "
              type="text"
              @click="rowClickRefund(scope.row)"
            >{{ translate("refundPrice") }}</el-button>
            <el-button
              v-if="scope.row.status == '0'"
              type="text"
              @click="getServiceChargePriceBtn('2', scope.row.id)"
            >{{ translate("freeze") }}</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="saleRecordTotal"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="pageSizeChange"
    />

    <el-dialog
      :title="ModalTitle"
      :visible.sync="isShowModal"
      :close-on-click-modal="closeModal"
      width="500px"
    >
      <div class="h3">{{ ModalText }}</div>
      <div
        v-if="ModalTitle === translate('cmoboFreeze')"
        style="margin-top: 20px"
      >
        {{ translate("freezeMoney") }}：{{
          serviceChargePrice
            ? serviceChargePrice + translate("rmb")
            : translate("mianfei")
        }}
      </div>
      <div
        v-if="
          ModalTitle != translate('cmoboCance') &&
            ModalTitle != translate('cmoboThaw')
        "
        class="df_ac mt20"
      >
        <span class="key">{{ translate("thrwTime") }}：</span>
        <el-date-picker
          v-model="ModelTime"
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          :placeholder="translate('thrwTimePlace')"
          class="flex1"
        />
      </div>
      <div class="df_ac mt20">
        <span>{{ translate("handleRemark") }}：</span>
        <el-input
          v-model="ModelRemark"
          class="flex1"
          :placeholder="translate('handleRemarkPlace')"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          :loading="subLoading"
          @click="handleModelEnter"
        >{{ translate("qd") }}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="translate('cmoboDdjust')"
      :visible.sync="isShowAdjust"
      :close-on-click-modal="closeModal"
      width="500px"
    >
      <div class="adjust_modal">
        <el-radio-group v-model="isAllType">
          <div v-if="selectSalesList && selectSalesList.length > 0">
            <el-radio
              :label="1"
            >{{ translate("yxdq") }}{{ selectSalesList.length
            }}{{ translate("tsj") }}</el-radio>
          </div>
          <div class="mt10">
            <el-radio
              :label="2"
            >{{ translate("yxdqsx") }}{{ saleRecordTotal
            }}{{ translate("tsj") }}</el-radio>
          </div>
        </el-radio-group>
        <div class="df_ac mb5 mt20">
          <span class="key">{{ translate("yxqzj") }}：</span>
          <el-input
            v-model="adjustData.addTime"
            oninput="value=value.replace(/[^\d]/g,'')"
            class="flex1 mr10"
          />
          <span>{{ translate("days") }}</span>
        </div>
        <div class="df_ac mb20">
          <span class="key" />
          <span class="text_warning">{{ translate("xghzjts") }}</span>
        </div>
        <div class="df_ac mb5">
          <span class="key">{{ translate("tcylzj") }}：</span>
          <el-input
            v-model="adjustData.addNum"
            oninput="value=value.replace(/[^\d]/g,'')"
            class="flex1 mr10"
          />
          <span>{{ translate("degree") }}</span>
        </div>
        <div class="df_ac">
          <span class="key" />
          <span class="text_warning">{{ translate("tcxghzjts") }}</span>
        </div>
        <div class="df_ac mt20">
          <span class="key">{{ translate("handleRemark") }}：</span>
          <el-input
            v-model="ModelRemark"
            style="width: 336px"
            :placeholder="translate('handleRemarkPlace')"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAdjust = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          :loading="subLoading"
          @click="handleModelEnter"
        >{{ translate("qd") }}</el-button>
      </span>
    </el-dialog>

    <Refund
      v-if="isShowRefund"
      ref="RefundRef"
      @close="isShowRefund = false"
      @success="refundSuccess"
    />
    <Detail v-if="isShowDetail" ref="detailRef" />
    <!-- <orderDialog ref="child" @orderSuccess="getList()" /> -->
  </div>
</template>

<script>
import Paginations from '@/components/paginations'
import dayjs from 'dayjs'
import { parseTime } from '@/utils'
import { comboSalesRecordPost, handleComboSalesPost, handleComboAllAdjust, recordExport, getServiceChargePrice } from '@/api'
import QueryForm from '@/components/QueryForm'
import Detail from '../comboDetail'
import Refund from './refund.vue'
export default {
  name: 'SalesRecord',
  components: {
    Paginations,
    QueryForm,
    // orderDialog,
    Refund,
    Detail
  },
  data() {
    return {
      exportLoading: false,
      isShowDetail: false,
      isShowRefund: false,
      isAllType: 1,
      queryFormConfig: {
        formItems: [{
          filed: 'id',
          type: 'input',
          label: this.translate('comboNum'),
          placeholder: this.translate('comboNumPlace'),
          clearable: true
        }, {
          filed: 'mealsName',
          type: 'input',
          label: this.translate('tcname'),
          placeholder: this.translate('tcnameplace'),
          clearable: true
        }, {
          filed: 'memberSearchValue',
          type: 'input',
          label: this.translate('memberInfo'),
          placeholder: this.translate('memberInfoPlace'),
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: this.translate('status'),
          placeholder: this.translate('statusPlace'),
          clearable: true,
          options: [
            { value: '0', label: this.translate('normal') },
            { value: '1', label: this.translate('freeze') },
            { value: '2', label: this.translate('cancellation') },
            { value: '3', label: this.translate('loseEfficacy') }]
        },
        {
          filed: 'indate',
          type: 'slot',
          label: this.translate('indate')
        }],
        online: true
      },
      pickerOptions: this.handelDate(),
      meta: [],
      closeModal: this.$store.getters.dialog,
      querys: {
        id: '',
        mealsName: '',
        memberSearchValue: '',
        status: '',
        indate: []
      },
      pagination: {
        firstQueryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        page: 1,
        rows: 10
      },

      saleRecordList: [],
      saleRecordTotal: 0,
      selectSalesList: [],
      saleRecordLoading: false,
      subLoading: false,

      isShowModal: false,
      ModalTitle: '',
      ModalText: '',
      ModelTime: '',
      ModelRemark: '',
      // ⬇️adjust调整相关
      isShowAdjust: false,
      adjustData: {
        addNum: '',
        addTime: ''
      },
      serviceChargePrice: '',
      serviceChargeId: ''
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    rowClickRefund(row) {
      this.isShowRefund = true
      this.$nextTick(() => {
        this.$refs.RefundRef.getPrice(row)
        this.$refs.RefundRef.isShow = true
      })
    },
    handelDate() {
      return {
        // disabledDate : 设置禁用状态，参数为当前日期，要求返回 Boolean
        disabledDate(time) {
          // return time.getTime() > Date.now() // 只能选今天之前的日期
          return time.getTime() < Date.now() // 只能选今天之后的日期
          // return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000 // 包括当前日期之后的日期
        }
      }
    },
    refundSuccess() {
      this.isShowRefund = false
      this.getList()
    },
    getServiceChargePriceBtn(type, mealsMemberId) {
      this.serviceChargeId = mealsMemberId
      getServiceChargePrice({
        param: {
          type,
          mealsMemberId
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.serviceChargePrice = res.record.price
          this.openModal('dongjie')
        }
      })
        .catch(() => { })
    },
    comboRecordExport() {
      const { querys } = this
      this.exportLoading = true
      recordExport({
        param: {
          ...querys
        }
      }).then((res) => {
        this.exportLoading = false
        if (res.errorCode === '000000') {
          const a = document.createElement('a') // 创建一个a标签元素
          a.style.display = 'none' // 设置元素不可见
          a.href = res.record.showUrl // 设置下载地址
          document.body.appendChild(a) // 加入
          a.click() // 触发点击,下载
          document.body.removeChild(a) //
          this.$message.success(this.translate('dccg'))
        }
      })
        .catch(() => {
          this.exportLoading = false
        })
    },
    handleDisable(row, index) {
      if (row.status === '2') {
        return false
      } else {
        return true
      }
    },
    // 查询表格数据
    getList(page) {
      const { querys, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      if (querys.indate && querys.indate.length > 0) {
        querys.startTime = querys.indate[0]
        querys.endTime = querys.indate[1]
      } else {
        querys.startTime = null
        querys.endTime = null
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.saleRecordLoading = true
      comboSalesRecordPost({
        pagination, param: {
          ...querys,
          venueId: sessionStorage.getItem('venueId')
        }
      }).then(res => {
        this.saleRecordLoading = false
        if (res.errorCode === '000000') {
          this.saleRecordLoading = false
          this.saleRecordTotal = res.totalCount
          this.saleRecordList = res.recordList
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        }
      }).catch(() => {
        this.saleRecordLoading = false
      })
    },
    clearQueryForm() {
      // eslint-disable-next-line no-unused-vars
      this.querys = {}
      this.getList(1)
    },
    // 打开modal 冻结 解冻 作废
    openModal(type) {
      const { selectSalesList } = this
      this.ModelRemark = ''
      this.ModelTime = ''
      this.adjustData.addNum = ''
      this.adjustData.addTime = ''
      switch (type) {
        case 'dongjie':
          this.ModalTitle = this.translate('cmoboFreeze')
          this.ModalText = this.translate('cmoboFreezePlace')
          break
        case 'jiedong':
          this.ModalTitle = this.translate('cmoboThaw')
          this.ModalText = this.translate('cmoboThawPlace')
          break
        case 'zuofei':
          this.ModalTitle = this.translate('cmoboCance')
          this.ModalText = this.translate('cmoboCancePlace')
          break
        case 'tiaozheng':
          this.ModalTitle = this.translate('cmoboDdjust')
          break
        default:
          break
      }
      if (this.saleRecordTotal === 0) {
        return false
      }
      if (selectSalesList.length === 0 && type !== 'dongjie') {
        this.isAllType = 2
        // return this.$message.warning(`请先选择要${this.ModalTitle.slice(2)}的套餐`)
      } else {
        this.isAllType = 1
      }
      if (this.ModalTitle === this.translate('cmoboDdjust')) {
        this.isShowAdjust = true
      } else {
        this.isShowModal = true
      }
    },
    // 确定 冻结 解冻 作废
    handleModelEnter() {
      switch (this.ModalTitle) {
        case this.translate('cmoboFreeze'):
          this.Freeze()
          break
        case this.translate('cmoboThaw'):
          this.Unfreeze()
          break
        case this.translate('cmoboCance'):
          this.cancellation()
          break
        case this.translate('cmoboDdjust'):
          if (this.isAllType === '1' || this.isAllType === 1) {
            this.handleAdjust()
          } else {
            this.allHandleAdjust()
          }
          break
        default:
          break
      }
    },
    // 冻结
    Freeze() {
      const that = this
      const data = {
        type: '1',
        handleRemake: this.ModelRemark,
        isCreateOrder: '1',
        autoFreezeDate: this.ModelTime,
        id: this.serviceChargeId
      }
      this.subLoading = true
      handleComboSalesPost({ param: { ...data }}).then(res => {
        this.subLoading = false
        this.isShowModal = false
        if (res.errorCode === '000000') {
          const obj = res.record
          if (obj && obj.price) {
            obj.goodsInfos = obj.serviceChargeOrderInfo
            obj.allPrice = obj.price
            this.$refs.child.continuePay(obj, 'handlingFees')
          } else {
            this.$message.success(this.translate('FreezeScs'))
            this.getList()
          }
          //
        } else if (res.errorCode === '200001') {
          this.$confirm(this.translate('untreatedOrderEd'), this.translate('ts'), {
            confirmButtonText: this.translate('qd'),
            cancelButtonText: this.translate('cancel'),
            type: 'warning',
            callback: () => { },
            beforeClose: (action, ctx, close) => {
              if (action !== 'confirm') {
                close()
                return
              }
              ctx.confirmButtonLoading = true
              that.$router.push({ name: 'HandlingFees' })
            }
          }).finally(() => {
            this.subLoading = false
            this.isShowModal = false
          })
        }
      })
    },
    // 解冻
    async Unfreeze() {
      const data = {
        type: '2',
        handleRemake: this.ModelRemark,
        autoFreezeDate: this.ModelTime,
        id: this.selectSalesList.map(i => i.id).join(',')
      }
      this.subLoading = true
      const res = await handleComboSalesPost({ param: { ...data }}).catch(() => {
        this.subLoading = false
        this.isShowModal = false
      })
      this.subLoading = false
      this.isShowModal = false
      if (res && res.errorCode === '000000') {
        this.$message.success(this.translate('ThawScs'))
        this.getList()
      }
    },
    // 调整
    async handleAdjust() {
      if (!this.adjustData.addNum && !this.adjustData.addTime) {
        return this.$message.warning(this.translate('ddjustDaysPlace'))
      }
      const data = {
        type: '3',
        handleRemake: this.ModelRemark,
        addNum: this.adjustData.addNum || 0,
        addTime: this.adjustData.addTime || 0,
        id: this.selectSalesList.map(i => i.id).join(',')
      }

      this.subLoading = true
      const res = await handleComboSalesPost({ param: { ...data }}).catch(() => {
        this.subLoading = false
        this.isShowModal = false
      })
      this.subLoading = false
      this.isShowModal = false
      if (res && res.errorCode === '000000') {
        this.$message.success(this.translate('ddjustScs'))
        this.getList()
        this.isShowAdjust = false
      }
    },
    async allHandleAdjust() {
      if (!this.adjustData.addNum && !this.adjustData.addTime) {
        return this.$message.warning(this.translate('ddjustDaysPlace'))
      }
      const data = {
        handleRemake: this.ModelRemark,
        addNum: this.adjustData.addNum || 0,
        addTime: this.adjustData.addTime || 0
      }

      this.subLoading = true
      const res = await handleComboAllAdjust({ param: { ...data, ...this.querys }}).catch(() => {
        this.subLoading = false
        this.isShowModal = false
      })
      this.subLoading = false
      this.isShowModal = false
      if (res && res.errorCode === '000000') {
        this.$message.success(this.translate('ddjustScs'))
        this.getList()
        this.isShowAdjust = false
      }
    },
    // 作废
    async cancellation() {
      const data = {
        type: '4',
        handleRemake: this.ModelRemark,
        id: this.selectSalesList.map(i => i.id).join(',')
      }
      this.subLoading = true
      const res = await handleComboSalesPost({ param: { ...data }}).catch(() => {
        this.subLoading = false
        this.isShowModal = false
      })
      this.subLoading = false
      this.isShowModal = false
      if (res && res.errorCode === '000000') {
        this.$message.success(this.translate('cmoboCanceScs'))
        this.getList()
      }
    },
    handleSelectionChange(val) {
      this.selectSalesList = val
    },
    comboDetail(item) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.detailRef.isShowModal = true
        this.$refs.detailRef.comboDetail(item)
      })

      // this.$router.push({
      //   name: 'comboDetail',
      //   query: item
      // })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    }

  }
}
</script>

<style lang="scss" scoped>
// .adjust_modal {
//   .df_ac {
//     .key {
//       width: 100px;
//       text-align: right;
//     }
//   }
// }
</style>
